<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model checkbox复选框</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
    <!--复选框分单独使用和组合使用两种情况。
        复选框单独使用时，v-model绑定的是布尔值，选中时值为true，未选中时值为false。
    -->
    <!--  第一种为单个复选框 -->
    <label for="license">
        <input type="checkbox" id="license" v-model="isAgree">同意协议
    </label>
    <h2>您的选择是{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
    <!-- 第二种为多个复选框 -->
    <!-- 复选框一起使用时，绑定的是一个数组，选中的复选框的值将被保存到数组中。 -->
    <input type="checkbox" value="篮球" v-model="hobbies"> 篮球
    <input type="checkbox" value="排球" v-model="hobbies"> 排球
    <input type="checkbox" value="足球" v-model="hobbies"> 足球
    <input type="checkbox" value="乒乓球" v-model="hobbies"> 乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies"> 羽毛球
    <h2>你的选择是{{hobbies}}</h2>
    

    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{ 
                msg:'hello world',
                isAgree:false,
                hobbies:[]
            }
        })
    </script>   
</body>
</html>